<template>
  <div class="sidebar">
    <div class="tab-select">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index, index === 2)"
        class="btn-tab"
        :class="{
          active: currentTabIndex === index,
          'pre-tab': index === currentTabIndex - 1
        }"
      >
        {{ tab }}
      </div>
    </div>
    <el-scrollbar class="tab-content">
      <template v-if="currentTabIndex === 0">
        <div class="target-overview">
          <div class="knowledge-point-overview">
            <div class="name">
              <div class="text">知识点</div>
            </div>
            <div class="content">
              <el-popover placement="left" :width="400" trigger="click">
                <template #reference>
                  <div class="item">
                    <div class="title">
                      <div class="text">优秀</div>
                      <el-popover
                        placement="bottom-start"
                        width="10vw"
                        trigger="hover"
                        content="统计知识点范围内，知识点正确率≥80%的知识点个数"
                      >
                        <template #reference>
                          <div class="icon"></div>
                        </template>
                      </el-popover>
                    </div>
                    <div class="value">
                      <div class="text">
                        <div class="value-right">
                          {{ Math.round(masteredCountTran) }}
                          <img
                            src="@/assets/images/common/arrow-right-blue.svg?url"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <el-scrollbar height="20vw">
                  <a-table
                    :dataSource="masteredKnowledgePoints"
                    :customRow
                    :columns="columns"
                    :pagination="false"
                    :showExpandColumn="false"
                    :locale
                  />
                </el-scrollbar>
              </el-popover>
              <el-popover placement="right" :width="400" trigger="click">
                <template #reference>
                  <div class="item middle">
                    <div class="title">
                      <div class="text">中等</div>
                      <el-popover
                        placement="bottom-start"
                        width="10vw"
                        trigger="hover"
                        content="统计时间范围内，知识点正确率为[60%,80%)的知识点个数"
                      >
                        <template #reference>
                          <div class="icon"></div>
                        </template>
                      </el-popover>
                    </div>
                    <div class="value">
                      <div class="text">
                        <div class="value-right">
                          {{ Math.round(unmasteredCountTran)
                          }}<img
                            src="@/assets/images/common/arrow-right-blue.svg?url"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <el-scrollbar height="20vw">
                  <a-table
                    :dataSource="unmasteredKnowledgePoints"
                    :customRow
                    :columns="columns"
                    :pagination="false"
                    :showExpandColumn="false"
                    :locale
                  />
                </el-scrollbar>
              </el-popover>

              <div class="item" @click="currentTabIndex = 1">
                <div class="title">
                  <div class="text">薄弱</div>
                  <el-popover
                    placement="bottom-start"
                    width="10vw"
                    trigger="hover"
                    content="统计时间范围内，知识点正确率<60%的知识点个数"
                  >
                    <template #reference>
                      <div class="icon"></div>
                    </template>
                  </el-popover>
                </div>
                <div class="value">
                  <div class="text">
                    <div class="value-right">
                      {{ Math.round(weaknessesCountTran) }}
                      <img
                        src="@/assets/images/common/arrow-right-blue.svg?url"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <StudentStatus
              :knowledgeId
              :knowledgeInfo
              :classId
              :currentGradeNum
              :subjectId
              :selectTime
              :count
              @toDetail="toDetail"
            />
          </div>
          <transition name="fade-up" mode="in-out">
            <div v-if="selectedStudent.length" class="to-detail">
              <div class="selected-num">
                已选择
                <span style="font-weight: 700">{{
                  selectedStudent.length
                }}</span>
                名学生
              </div>
              <button @click="toDetail" class="btn-detail">靶向提升</button>
            </div>
          </transition>
        </div>
      </template>

      <template v-else-if="currentTabIndex === 1 && listWeaknesses.length">
        <div
          v-for="weaknesses in listWeaknesses"
          :key="weaknesses.name"
          @click="changeDetail(weaknesses)"
          class="knowledge-point"
        >
          <div
            class="circle"
            :style="{
              backgroundColor:
                getCurRate(weaknesses) < 0.6 ? '#D92325' : '#B3D465'
            }"
          ></div>
          <div class="point-name">{{ weaknesses.name }}</div>
          <div class="info">
            <div class="rate-text">
              正确率:
              <span
                :style="{
                  color: getCurRate(weaknesses) < 0.6 ? '#C44B4F' : '#619B61'
                }"
                >{{ (getCurRate(weaknesses) * 100).toFixed(2) }}%</span
              >
            </div>
            <div class="question-count">
              习题数:{{ getCurCount(weaknesses) }}题
            </div>
          </div>
          <el-divider border-style="dashed" />
        </div>
      </template>
      <el-empty
        description="暂无正确率低于60%的知识点"
        v-else-if="currentTabIndex === 1 && !listWeaknesses.length"
      />
      <template
        v-else-if="
          currentTabIndex === 2 &&
          (strengthsAndWeaknesses.weaknessList.length ||
            strengthsAndWeaknesses.strengthList.length)
        "
      >
        <div style="color: #d92325">劣势</div>
        <template v-if="weaknessesData.length">
          <div
            class="knowledge-point"
            v-for="weaknesses in weaknessesData"
            :key="weaknesses.name"
            @click="changeDetail(weaknesses)"
          >
            <div class="circle" style="background-color: #d92325"></div>
            <div class="name">
              <div class="text">{{ weaknesses.name }}</div>
              <span
                class="compare-rate"
                style="
                  margin-left: auto;
                  color: #d92325;
                  background-color: #fff1f0;
                  border-radius: 5px;
                "
              >
                {{ (weaknesses.compare_rate * 100).toFixed(2) }}%
              </span>
            </div>
            <div class="info">
              <div class="rate-text">
                {{
                  route.query.studentId
                    ? `个人:${(weaknesses.personal_rate * 100).toFixed(2)}`
                    : `班级:${(weaknesses.class_rate * 100).toFixed(2)}`
                }}% | {{ `年级:${(weaknesses.grade_rate * 100).toFixed(2)}` }}%
              </div>
              <div class="question-count">
                习题数:
                {{
                  route.query.studentId
                    ? weaknesses.personal_count
                    : weaknesses.class_count
                }}题 | {{ weaknesses.grade_count }}题
              </div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </template>
        <el-empty :description="`暂无对比${compareLabel}劣势知识点`" v-else />

        <div style="color: #b3d465">优势</div>
        <template v-if="strengthData.length">
          <div
            class="knowledge-point"
            v-for="weaknesses in strengthData"
            :key="weaknesses.name"
            @click="changeDetail(weaknesses)"
          >
            <div class="circle" style="background-color: #b3d465"></div>
            <div class="name">
              <div class="text">{{ weaknesses.name }}</div>
              <span
                class="compare-rate"
                style="
                  margin-left: auto;
                  color: #b3d465;
                  background-color: #f0f9eb;
                  border-radius: 5px;
                "
              >
                +{{ (weaknesses.compare_rate * 100).toFixed(2) }}%
              </span>
            </div>
            <div class="info">
              <div class="rate-text">
                {{
                  route.query.studentId
                    ? `个人:${(weaknesses.personal_rate * 100).toFixed(2)}`
                    : `班级:${(weaknesses.class_rate * 100).toFixed(2)}`
                }}% | {{ `年级:${(weaknesses.grade_rate * 100).toFixed(2)}` }}%
              </div>
              <div class="question-count">
                习题数:
                {{
                  route.query.studentId
                    ? weaknesses.personal_count
                    : weaknesses.class_count
                }}题 | {{ weaknesses.grade_count }}题
              </div>
            </div>
            <el-divider border-style="dashed" />
          </div>
        </template>
        <el-empty :description="`暂无对比${compareLabel}优势知识点`" v-else />
      </template>
      <el-empty v-else description="暂无优势、劣势知识点" />
    </el-scrollbar>
  </div>
</template>
<script setup>
import { defineModel, computed } from 'vue'
import { useKnowledgeStore } from '@/stores/knowledge-store'
import { storeToRefs } from 'pinia'
import { useTransition } from '@vueuse/core'

import StudentStatus from './StudentStatus.vue'

const knowledgeStore = useKnowledgeStore()

const { allParentNode, selectedStudent } = storeToRefs(knowledgeStore)

import { useRoute } from 'vue-router'

const route = useRoute()

const emit = defineEmits(['changeDetail', 'changeGraph', 'showDetail'])
const props = defineProps({
  listWeaknesses: Array,
  masteredKnowledgePoints: Array,
  unmasteredKnowledgePoints: Array,
  knowledgeId: Number,
  knowledgeTree: Object,
  strengthsAndWeaknesses: Object,
  getAllParentNodes: Function,
  compareLabel: String,
  selectTime: Array,
  classId: String,
  currentGradeNum: Number,
  subjectId: Number,
  count: Number
})

// 过滤 class_count 或 personal_count 为 0 的知识点
const weaknessesData = computed(() => {
  let { weaknessList } = props?.strengthsAndWeaknesses || {}
  if (!weaknessList) return []
  let { studentId } = route.query
  return weaknessList.filter(item =>
    studentId ? item.personal_count > 0 : item.class_count > 0
  )
})
const strengthData = computed(() => {
  let { strengthList } = props?.strengthsAndWeaknesses || {}
  if (!strengthList) return []
  let { studentId } = route.query
  return strengthList.filter(item =>
    studentId ? item.personal_count > 0 : item.class_count > 0
  )
})

const locale = {
  emptyText: '暂无数据',
  cancelSort: '点击取消排序',
  triggerAsc: '点击升序',
  triggerDesc: '点击降序'
}

const curRate = node => {
  console.log(node)

  return route.query.studentId ? node.personal_rate : node.class_rate
}
const curCount = node => {
  return route.query.studentId ? node.personal_count : node.class_count
}

const knowledgeInfo = computed(() => {
  console.log(props.knowledgeTree)

  if (!props.knowledgeTree) {
    return
  }
  return {
    rate: curRate(props.knowledgeTree) * 100,
    count: curCount(props.knowledgeTree)
  }
})

const masteredCount = computed(() => {
  return props.masteredKnowledgePoints.length
})

const unmasteredCount = computed(() => {
  return props.unmasteredKnowledgePoints.length
})

const weaknessesCount = computed(() => {
  return props.listWeaknesses.length
})

const masteredCountTran = useTransition(masteredCount, {
  duration: 1500
})

const unmasteredCountTran = useTransition(unmasteredCount, {
  duration: 1500
})

const weaknessesCountTran = useTransition(weaknessesCount, {
  duration: 1500
})

const tabs = ['靶向概览', '薄弱点列表', '优劣势对比']

const isStudent = route.query.studentId

const columns = [
  {
    title: '知识点',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '考察题目数',
    dataIndex: isStudent ? 'personal_count' : 'class_count',
    key: isStudent ? 'personal_count' : 'class_count',
    width: '6vw'
  },
  {
    title: '正确率',
    dataIndex: isStudent ? 'personal_rate' : 'class_rate',
    key: isStudent ? 'personal_rate' : 'class_rate',
    customRender: ({ text }) => {
      return `${(text * 100).toFixed(2)}%`
    },
    sorter: (a, b) =>
      a[isStudent ? 'personal_rate' : 'class_rate'] -
      b[isStudent ? 'personal_rate' : 'class_rate'],
    width: '6vw'
  }
]

const changeDetail = weaknesses => {
  console.log(weaknesses)

  allParentNode.value = props.getAllParentNodes(weaknesses.id)
  emit('changeDetail', weaknesses)
}

const sidebarData = defineModel('sidebarData')

const customRow = row => {
  return {
    onClick: () => {
      console.log(row)
      sidebarData.value = row
      emit('showDetail')
    }
  }
}

const isCompare = defineModel('isCompare')
const currentTabIndex = defineModel('currentTabIndex')
// const isCompare = ref('weakpoint')

function selectTab(tab, isComp) {
  currentTabIndex.value = tab
  // 情况选中的学生
  if (tab !== 0 && selectedStudent.value.length) {
    knowledgeStore.setSelectedStudent([])
  }
  isCompare.value = isComp
  emit('changeGraph', isComp)
}

const getCurRate = weaknesses => {
  if (route.query.studentId) {
    return weaknesses.personal_rate
  }
  if (props.isCompare) {
    return weaknesses.grade_rate
  }
  return weaknesses.class_rate
}

const getCurCount = weaknesses => {
  if (route.query.studentId) {
    return weaknesses.personal_count
  }
  if (props.isCompare) {
    return weaknesses.grade_count
  }
  return weaknesses.class_count
}
const toDetail = (_, e) => {
  emit('toDetail', null, e)
}
</script>
<!-- eslint-disable -->
<style lang="less">
.el-popper {
  .ant-table-row {
    cursor: pointer;
  }
}
</style>

<style lang="less" scoped>
.sidebar {
  box-sizing: border-box;
  width: 564px;
  height: 100%;
}

.tab-select {
  height: 54px;
  display: flex;
  align-items: flex-end;
  border-radius: 10px 10px 0 0;
  // 上下渐变  上透明，下白色
  background: linear-gradient(to bottom, transparent, #fff);
  // 第一个和最后一个的样式
  .btn-tab:first-child {
    border-top-left-radius: 10px;
  }
  .btn-tab:last-child {
    border-top-right-radius: 10px !important;
  }
  .pre-tab {
    border-bottom-right-radius: 10px;
  }
  .btn-tab {
    flex: 1;
    height: 47px;
    background-color: #dce2f6;
    line-height: 47px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    transition: all 0.4s;
    &:hover {
      color: @theme-color;
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      font-weight: 700;
      border-radius: 10px 10px 0 0 !important;
    }
  }

  .active {
    color: @theme-color;
    height: 54px !important;
    background-color: #fff;
    line-height: 54px !important;
    font-weight: 700;
    border-radius: 10px 10px 0 0 !important;
    & + .btn-tab {
      border-radius: 0 0 0 10px;
    }
  }
}

.tab-content {
  box-sizing: border-box;
  padding: 16px 23px;
  height: calc(100% - 54px);
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}

.target-overview {
  .knowledge-point-overview {
    .name {
      .text {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
        &::before {
          content: '';
          display: inline-block;
          width: 5px;
          height: 18px;
          line-height: 18px;
          background-color: #2a65ff;
          margin-right: 8px;
        }
      }
    }
    .content {
      display: flex;
      justify-content: space-evenly;
      background-color: @color-brand-assist-light;
      border-radius: 5px;
      border-collapse: collapse;
      .item {
        flex: 1;
        &:first-child {
          .value {
            border-right: 1px solid #5aadf9;
          }
        }
        &:last-child {
          .value {
            border-left: 1px solid #5aadf9;
          }
        }
      }
      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 33%;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
        .title {
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 14px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          vertical-align: middle;
          font-weight: 500;
          .icon {
            width: 14px;
            height: 14px;
            background: url('@/assets/images/target-boost/question-filled.svg?url')
              no-repeat center center;
            background-size: 100% 100%;
          }
        }
        .value {
          width: 100%;
          .text {
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 20px;
            font-family: 'Source Han Sans CN';
            font-weight: 900;
            color: #4e9dfa;
            .value-right {
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex: 1;
              img {
                height: 20px;
              }
            }
          }
        }
      }
    }
  }
  .to-detail {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: inset 0 1px #f0f0f0;
    line-height: 60px;
    text-align: right;
    z-index: 100;
    .btn-detail {
      border: 0;
      padding: 0 12px;
      background-color: @theme-color;
      line-height: 2;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
}

.knowledge-point {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.6;
  cursor: pointer;
  :deep(.el-divider) {
    margin: 10px 0;
  }

  .circle {
    position: absolute;
    top: 12px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .point-name {
    margin-bottom: 10px;
  }

  .name,
  .info {
    display: flex;
    align-items: center;
  }

  .name {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;

    .value {
      position: absolute;
      right: 5px;
      color: #cf1322;
      background-color: #fff1f0;
      border: 1px solid #ffa39e;
    }
    .compare-rate {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 40px;
    }
  }

  .info {
    font-size: @size-base;
  }
  .rate-text,
  .question-count {
    color: @theme-color;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
  }

  .rate-text {
    margin-right: 12px;
  }
}
</style>
